<style scoped>
    .base-warp {
        height: 100%;
        min-width: 768px;
        overflow: hidden;
        position: relative;
        padding-top: 60px;;
    }

    .jf-header {
        height: 60px;
        padding-left: 40px;
        background: #3bc1a6;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }

    .jf-header__title {
        color: #FFFFFF;
        font-size: 35px;
        line-height: 60px;
        float: left;
    }

    .header_button {
        width: 130px;
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        border-radius: 5px;
        border: 0;
        color: #000;
        float: left;
        margin: 10px 0 0 20px;
    }

    .header_button:hover {
        outline: 0;
        box-shadow: 0 0 1px 0 #ffffff;
    }

    .header_button:active {
        outline: 0;
    }

    .jf-layout {
        height: 100%;
    }

    .jf-content {
        width: 100%;
        height: 100%;
        display: flex;
    }

    .jf-user-menu {
        cursor: pointer;
        float: right;
        margin-right: 50px;
        color: #FFF;
        font: 16px bold;
        line-height: 60px;
    }

    .router {
        color: #333333;
        display: block;
    }

    .jf-menus {
        width: 135px;
        height: 100%;
    }

    .left-menu {
        background: #46425a;

    }

    .left-menu__item {
        color: #cccccc;
        font-weight: bold;
        font-size: 22px;
    }

    .left-menu__item--active {
        background: #46425a;
        color: #ffffff;
    }

    .left-menu__item:hover {
        background: #46425a;
        color: #ffffff;
    }

    .menu__icon {
        display: inline-block;
        width: 40px;
        height: 30px;
        background: url("./assets/images/menu_home.png") no-repeat;
        background-position: left center;
        background-size: 25px 25px;
    }

    .menu__icon--home {
        background: url("./assets/images/menu_home.png") no-repeat;
    }

    .menu__icon--user {
        background: url("./assets/images/menu_user.png") no-repeat;
    }

    .menu__icon--order {
        background: url("./assets/images/menu_order.png") no-repeat;
    }

    .menu__icon--correction {
        background: url("./assets/images/menu_correction.png") no-repeat;
    }

    .menu__icon--power {
        background: url("./assets/images/menu_power.png") no-repeat;
    }


</style>
<template>
    <div class="base-warp">
        <div class="jf-header">
            <!--<span class="jf-header__title">淘客邦后台业务管理系统</span>-->
            <button class="header_button" @click="reload">刷新</button>
            <el-dropdown class="jf-user-menu">
                <span>{{admin.job}}-{{admin.name}}<i class="el-icon-caret-bottom el-icon--right"></i></span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="showPasswordDialog()">修改密码</span></el-dropdown-item>
                    <el-dropdown-item><span @click="logout()">退出登录</span></el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <el-row class="jf-content">
            <el-col class="jf-menus">
                <el-menu default-active="2" class="el-menu-vertical-demo jf-layout left-menu">
                    <template v-for="(menu,index) in menus">
                        <el-menu-item :index="index+''+index" class="left-menu__item"
                                      :class="{'left-menu__item--active':menu.id==activeMenu.id}">
                            <div @click="to(menu)"><i :class="menu.icon"></i>{{menu.text}}</div>
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-col>
            <el-col class="jf-tabs-warp jf-layout">
                <router-view class="jf-layout">
                </router-view>
            </el-col>
        </el-row>

        <el-dialog title="修改密码" :visible.sync="showPwdDialog">
            <el-form :model="po" ref="form" label-width='100px' :rules="rules">
                <el-form-item label="当前密码" prop="oldPwd">
                    <el-input type="password" v-model="po.oldPwd" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pwd">
                    <el-input type="password" v-model="po.pwd" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="pwdConfirm">
                    <el-input type="password" v-model="po.pwdConfirm" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="showPwdDialog = false">取 消</el-button>
                <el-button type="primary" @click="changePwd">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

    import bus  from 'utils/bus'
    export default {
        name: 'tkb_index',
        data: function () {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入新密码'));
                } else if (value !== this.po.pwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                po: {
                    oldPwd: '',
                    pwd: '',
                    pwdConfirm: ''
                },
                admin: {},
                activeMenu: "",
                menuData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                menus: [],
                showPwdDialog: false,

                rules: {
                    oldPwd: [
                        {required: true, message: '请输入当前密码', trigger: 'blur'},
                        {min: 6, max: 35, message: '长度在 6 到 35 个字符', trigger: 'blur'}
                    ],
                    pwd: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {min: 6, max: 35, message: '长度在 6 到 35 个字符', trigger: 'blur'}
                    ],
                    pwdConfirm: [{validator: validatePass2, trigger: 'blur'}]
                }
            }
        },
        components: {},
        methods: {
            showPasswordDialog(){
                this.po = {
                    oldPwd: '',
                    pwd: '',
                    pwdConfirm: ''
                }
                this.showPwdDialog = true
            },
            changePwd(){
                this.$refs.form.validate().then(valid=> {
                    if (valid) {
                        this.$post("/admin/changePwd", this.po).then(data=> {
                            this.showPwdDialog = false
                            this.$message("修改成功！")
                            this.$post('/logout').then(()=> {
                                window.sessionStorage.removeItem("admin")
                                this.$router.replace("/login")
                            })
                        }).catch(err=> {
                            this.$alert(err.message, {type: 'error'})
                        })
                    }
                }).catch(()=> {
                })
            },
            to(menu){
                this.activeMenu = menu
                this.$router.replace(menu.router)
                bus.$emit("selectMenu", menu)
            },
            logout(){
                this.$confirm("您确定退出登录吗？", "提示").then(()=> {
                    this.$post('/logout').then(()=> {
                        window.sessionStorage.removeItem("admin")
                        this.$router.replace("/login")
                    })
                }).catch(() => {
                });
            },
            reload(){
                bus.$emit("reload")
            },
            getMenuList(){
                this.$get('/menu/treeMenu').then(data=> {
                    this.menus = data

                    this.$nextTick(()=>{
                        let menu=data[0]
                        if(menu.children&&menu.children.length){
                            menu=menu.children[0]
                        }
                        this.to(menu)
                    })
                }).catch(err=> {
                    this.$massage.error(err.message)
                })
            }
        },
        mounted: function () {
            try {
                let admin = window.sessionStorage.getItem("admin")
                this.admin = JSON.parse(admin)
                if (!this.admin) {
                    this.$router.replace("/login")
                }
                this.getMenuList()
            } catch (e) {
                this.$router.replace("/login")
            }
        },
        filters: {}
    }
</script>